<template>
    <div>
      <div class="header-back">
        <div class="list-header-title">
          <p>用户管理</p>
        </div>
        <div class="list-header-search">
          <el-input
            placeholder="请输入内容"
            v-model="search"
            clearable
            class="input"
          >
          </el-input>
          <el-button type="primary" @click="this.load" icon="el-icon-search"
            >查询</el-button
          >
          <el-button type="primary" @click="openAddUser">添加</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        v-loading="loading"
        border
        fit
      >
      <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="180" sortable>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.typeName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <p>{{ scope.row.status? "可用":"不可用" }}</p>
          </template>
        </el-table-column>
        <el-table-column label="修改人">
          <template slot-scope="scope">
            <p>{{ scope.row.updateUserName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="修改时间">
          <template slot-scope="scope">
            <p>{{ scope.row.updateTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin: 10px 0"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
  
      <el-dialog :title="titleValue" :visible.sync="dialogTableVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="form.typeName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
          <!-- <el-form-item label="修改人">
            <el-input v-model="form.updateUserName"></el-input>
          </el-form-item> -->
          <el-form-item label="修改时间">
            <el-input v-model="form.updateTime"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import request from "@/utils/request";
  
  export default {
    data() {
      return {
        tableData: [],
        form: {},
        loading: true,
        search: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
        //  控制模态框的状态
        dialogTableVisible: false,
        //  动态表头
        titleValue: "",
      };
    },
    created() {
      this.load();
      // console.log("pageSize2",this.pageSize);
    },
    methods: {
      load() {
        this.loading = true;
        let pram = "?typeName=" + this.search;
        request
          .get("/type/query/" + this.pageNum + "/" + this.pageSize + pram)
          .then((res) => {
            this.loading = false;
            this.tableData = res.data.list;
            this.total = res.data.total;
          });
      },
  
      openAddUser() {
        this.dialogTableVisible = true;
        this.titleValue = "添加";
        //  清空表格
        this.form = {};
      },
      submitForm() {
        // 隐藏弹框
        this.dialogTableVisible = false;
        if (this.form.id) {
          // update
          request
            .put("/type/update", this.form, sessionStorage.getItem("realName"))
            .then((res) => {
              // console.log('form',this.form);
              if (res) {
                // console.log("xiugai",res);
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.load()
              } else {
                this.$message.error("修改失败");
              }
            })
            .catch((err) => {
              this.$message.error("修改失败");
            });
        } else {
          // post
          request
            .post("/type/add", this.form, sessionStorage.getItem("realName"))
            .then((res) => {
              if (res) {
                this.$message({
                  type: "success",
                  message: "新增成功",
                });
                this.load()
              } else {
                this.$message.error("添加失败");
              }
            })
            .catch((error) => {
              // console.log("err", error);
              this.$message.error("添加失败");
            });
        }
        this.load();
      },
      resetForm() {
        this.dialogTableVisible = false;
      },
      handleEdit(index, row) {
        console.log(index, row);
        //  动态表头
        this.titleValue = "编辑";
        //  显示模态框
        (this.dialogTableVisible = true),
          //    回显
          (this.form = row);
      },
      handleDelete(index, row) {
        // console.log(index, row);
        // console.log("ID",row.id);
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //发请求
            request
              .delete("/type/del/" + row.id)
              .then((res) => {
                //刷新页面
                this.load();
                // console.log(res);
                if(res.code == "0000"){
                  this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                }
                // this.load()
              })
              .catch((error) => {
                console.log(error);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleSizeChange(pageSize) {
        // 改变当前每页的个数触发
        this.pageSize = pageSize;
        this.load();
        console.log("pageSize", this.pageSize);
      },
      handleCurrentChange(pageNum) {
        // 改变当前页码触发
        this.pageNum = pageNum;
        this.load();
      },
    },
  };

  </script>
  
  <style lang="less" scoped>
  .header-back {
    background-color: rgb(255, 255, 255);
  }
  .list-header-search {
    padding: 10px;
    width: 400px;
    display: flex;
    justify-content: space-between;
  }
  .list-header-button {
    padding: 30px 10px 15px 10px;
  }
  .input {
    width: 300px;
  }
  </style>